<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="transparent">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" @tap.stop="handleNavBack"
          >&#xe600;</view
        >
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">
          {{ symbol }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="gBody" v-if="asset">
      <view
        class="head"
        :style="{ 'padding-top': statusBarHeight + 80 + 'rpx' }"
      >
        <text class="faa-grace-h3 grace-padding-top">
          {{ asset.balance }}
        </text>
        <text class="faa-grace-text"
          >≈ {{ asset.balance_price.CNY }} (CNY)</text
        >
        <view class="extract-head">
          <view class="buttons grace-grids grace-flex-vcenter">
            <navigator
              hover-class="none"
              :url="`/pages/wallet/withdraw/index?symbol=${asset.symbol}`"
              class="items"
            >
              <cloudIcon
                name="icontibi"
                class="color-m grace-flex-center"
                style="font-size:80rpx;"
              ></cloudIcon>
              <view class="text  font-24 color-m">
                {{ $t("wallet.withdraw") }}
              </view>
            </navigator>
            <navigator
              hover-class="none"
              :url="`/pages/wallet/recharge/index?symbol=${asset.symbol}`"
              class="items"
            >
              <cloudIcon
                name="iconchongbi"
                class="color-m grace-flex-center"
                style="font-size:80rpx;"
              ></cloudIcon>
              <view class="text  font-24 color-m">{{
                $t("wallet.recharge")
              }}</view>
            </navigator>
            <navigator
              hover-class="none"
              :url="`/pages/assets/transfer/index?symbol=${asset.symbol}`"
              class="items"
            >
              <cloudIcon
                name="iconneibuzhuanzhang"
                class="color-m grace-flex-center"
                style="font-size:80rpx;"
              ></cloudIcon>
              <view class="text font-24 color-m">
                {{ $t("wallet.internalTransfer") }}
              </view>
            </navigator>
          </view>
        </view>
      </view>
      <view
        class=" mr-30 ml-30 grace-flex grace-space-between grace-flex-vcenter mb-10"
        :style="{ 'margin-top': 120 + 'rpx' }"
      >
        <view class="font-32 weight-bold color-b1">
          {{ $t("wallet.logPage.log") }}
        </view>
        <view
          class="icons grace-icons font-32 color-b1"
          @tap.stop="switchShow = true"
          >&#xe614;</view
        >
      </view>
      <view class="grace-list ">
        <mescroll-uni
          ref="mescrollRef"
          @init="mescrollInit"
          :top="550 + statusBarHeight"
          @down="downCallback"
          @up="upCallback"
          :down="downOption"
          :up="upOption"
          class="grace-bg-white"
        >
          <!-- 分页的数据列表 -->
          <view
            class="grace-padding grace-bg-white"
            v-for="(log, index) in tranferLogs.data"
            :key="index"
            @tap.stop="onNavDetail(log)"
          >
            <view class="grace-border-b grace-list-items ">
              <view class="grace-list-body">
                <view class="grace-list-title">
                  <text class="grace-list-title-text">
                    {{ log.num > 0 ? "+" : "" }}{{ parseFloat(log.num) }}
                  </text>
                </view>
                <view class="grace-list-body-desc">
                  {{ log.module_action_name || log.info }}
                </view>
              </view>

              <text class="grace-list-title-desc">
                {{ log.created_at | moment("MM-DD HH:mm") }}
              </text>
              <text
                class="grace-list-arrow-right grace-icons icon-arrow-right"
              />
            </view>
          </view>
        </mescroll-uni>
      </view>
      <cloudBottomDialog :show="switchShow" @tap.stop="closeDialog">
        <view slot="content">
          <view class="switch">
            <view
              class="item font-28"
              :class="{ 'color-m': module == '', 'color-b1': module != '' }"
              @tap.stop="onTapFilter('all')"
            >
              {{ $t("wallet.withdrawPage.all") }}
            </view>
            <view
              class="item font-28"
              :class="{
                'color-m': module == type.key,
                'color-b1': module != type.key
              }"
              v-for="(type, index) in logModules"
              :key="index"
              @tap.stop="onTapFilter(type.key)"
            >
              {{ type.name }}
            </view>
          </view>
          <view class="close  font-28 color-b1" @tap.stop="switchShow = false">
            {{$t('common.operate.cancel')}}
          </view>
        </view>
      </cloudBottomDialog>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      symbol: "USDT",
      switchShow: false,
      module: "",
      downOption: {
        auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: true, // 不自动加载
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        empty: {
          tip: "~ 空空如也 ~"
        }
      },
      page: {
        page: 1, // 页码
        limit: 10 // 页数
      },
      statusBarHeight: 0
    };
  },
  computed: {
    ...mapGetters("asset", [
      "assets",
      "symbolBalances",
      "tranferLogs",
      "logModules"
    ]),
    asset() {
      return this.assets.find(asset => asset.symbol == this.symbol);
    }
  },
  onLoad({ symbol }) {
    const res = uni.getSystemInfoSync();
    console.log(res);
    console.log(res.statusBarHeight);
    this.statusBarHeight = res.statusBarHeight;
    this.symbol = symbol;
  },
  onShow() {
    this.loadAssets();
    this.loadLogModules();
  },
  methods: {
    ...mapMutations("asset", ["setTranferLogs"]),
    ...mapActions("asset", ["loadAssets", "loadTranferLogs", "loadLogModules"]),
    /*下拉刷新的回调 */
    downCallback() {
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      let $this = this;
      this.page.page = page.num;
      this.page.limit = page.size;
      this.loadTranferLogs({
        symbol: this.symbol,
        module: this.module,
        page: this.page.page,
        limit: this.page.limit
      })
        .then(res => {
          $this.mescroll.endByPage(res.data.length, res.last_page);
        })
        .catch(error => {
          $this.mescroll.endErr();
        });
    },
    onNavDetail({ id }) {
      this.handleNavTo({
        url: `/pages/wallet/asset/logs/detail?id=${id}`
      });
    },
    onTapFilter(type) {
      if (type == "all") {
        this.module = "";
      } else {
        this.module = type;
      }
      this.setTranferLogs(null);
      this.mescroll.resetUpScroll();
      this.switchShow = false;
    }
  }
};
</script>

<style scoped>
.gBody {
  position: absolute;
  top: 0px;
}

.head {
  background: url("/static/accets_page_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  text-align: center;
}

.extract-head .items {
  width: 33.3%;
  padding: 11px 0;
  box-sizing: border-box;
}
.head .items .item view {
  line-height: 60rpx;
}

.table {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}
.table .title {
  width: 680rpx;
  margin: 0rpx 35rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  background: #ffffff;
  overflow: hidden;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 1px;
}
.table .title view {
  width: 100%;
}

.table-data-list {
  width: 100%;
}
.table-data-list .table-ul {
  width: 680rpx;
  margin: 0rpx 35rpx;
  border-bottom: 1rpx solid #eeeeee;
}
.table-data-list .table-ul:last-child {
  border-bottom: none;
}
.grace-data-table .title > view,
.table-data-list .table-ul view {
  text-align: left;
}
.table-data-list .table-ul view {
  flex: 1;
  line-height: 80rpx;
  font-size: 30rpx;

  width: 100%;
}

.noMore {
  width: 100%;
  text-align: center;
  margin: 20rpx 0rpx;
}

.switch {
  width: 700rpx;
  background: #ffffff;
  border-radius: 20rpx;
}
.switch .item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  border-bottom: 1rpx solid #eeeeee;
}
.switch .item:last-child {
  border-bottom: none;
}
.close {
  width: 700rpx;
  height: 100rpx;
  line-height: 100rpx;
  margin-top: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  text-align: center;
}

.extract-head {
  width: 688rpx;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* margin-top: 60rpx; */
  position: relative;
  top: 70rpx;
}
.extract-head .buttons {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 10rpx 0px rgba(51, 51, 51, 0.1);
  border-radius: 10rpx;
}
.faa-grace-h3 {
  font-size: 48rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.faa-grace-text {
  color: #ffffff;
}
.grace-list .grace-padding:last-child .grace-border-b {
  border-bottom: none;
}
</style>
